<style scoped>
  .footer{
    width:100%;
    position: fixed;
    left:0;
    bottom:0px;
    height:60px;
    z-index: 10;
    box-shadow: 3px 3px 4px 3px #e9e9e9;
  }
  .footer ul{
    display: flex;
    flex-direction: row;
    height:100%;
    background: #ffffff;
  }
  .footer ul li{
    flex: 1;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-touch-callout: none
  }
  .footer ul li a{
    text-align: center;
    /*margin-top: 2px;*/
  }
  .footer ul li p{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
    letter-spacing:4px;
    color: #7f7a8e;
    margin-top: -2px;
  }
  @media screen and (max-width: 320px) {
    .footer ul li h5{
      letter-spacing:2px;
    }
    .footer ul li i{
      font-size: 2.5rem;
    }
    .footer ul li:nth-child(3){
      margin-top:-16px;
    }
    ul li:nth-child(3) a{
      width:50px;
      height:50px;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .footer ul li h5{
      letter-spacing:3px;
    }
    .footer ul li i{
      font-size: 2.9rem;
    }
    .footer ul li:nth-child(3){
      margin-top:-10px;
    }
    ul li:nth-child(3) a{
      width:60px;
      height:60px;
    }
  }
  @media screen and (min-width: 376px){
    .footer ul li h5{
      letter-spacing:4px;
    }
    .footer ul li i{
      font-size: 3.2rem;
    }
    .footer ul li:nth-child(3){
      margin-top:-20px;
    }
    ul li:nth-child(3) a{
      width:70px;
      height:70px;
    }
    .footer{
      height: 70px!important;
    }
  }
  .footer ul li p{
    color: #a4a3a9;
  }
  /*ul li.active a p{*/
    /*color: #4D63EB;*/
  /*}*/
  /*ul li.active a i{*/
    /*color: #4D63EB;*/
  /*}*/
  .router-link-active p{
    color: #4D63EB!important;
  }
  ul li:nth-child(3) a{
    border-radius: 50%;
    background: -webkit-linear-gradient(left bottom,#6379F8,#91A5F8);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(102,102,102,0.5);
  }
  ul li:nth-child(3) a i{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1px;
  }
  ul li:nth-child(3).jia-rotate{
    animation: myfirst 0.2s;
    animation-timing-function: linear;
    animation-iteration-count:1;
    animation-fill-mode: forwards
  }
  @keyframes myfirst{
    0% {transform:rotate(0deg)}
    100% {transform:rotate(45deg)}
  }
  ul li:nth-child(3).jia-rotate2{
    animation: myfirst 0.2s;
    animation-timing-function: linear;
    animation-iteration-count:1;
    animation-fill-mode: forwards
  }
  @keyframes myfirst{
    0% {transform:rotate(0deg)}
    100% {transform:rotate(-45deg)}
  }
</style>

<template>
  <div class="footer">
    <ul id="ul">
        <li v-for="(icon,index) in icons" v-bind:class="{active: isActive}" @click="link(index)">
          <router-link :to="icon.link" v-if="icon.isShow">
            <i>
              <svg class="icon"
                   aria-hidden="true">
                <use :xlink:href="icon.ic"></use>
              </svg>
            </i>
            <p>{{icon.name}}</p>
          </router-link>
          <router-link :to="icon.link" v-else="!icon.isShow">
            <i>
              <svg class="icon"
                   aria-hidden="true">
                <use :xlink:href="icon.ic"></use>
              </svg>
            </i>
            <p>{{icon.name}}</p>
          </router-link>
        </li>

    </ul>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        icons: [
          {name: '首页', ic: '#icon-shouyeweixuanzhong1', ic2: '#icon-shouye2', 'link': '/index',isShow: true},
          {name: '收益', ic: '#icon-shouyidefuben', ic2: '#icon-shouyixuanzhong1', 'link': '/income1',isShow: false},
          {name: '交易', ic: '#icon-jiaoyi', 'link': '/all',isShow: false, ic2: '#icon-jiaoyixuanzhongicon'},
          {name: '实验', ic: '#icon-rendashiyanshix1', ic2: '#icon-shiyanshixuanzhong1', 'link': '/laboratory2',isShow: false},
          {name: '我的', ic: '#icon-wodex1', ic2: '#icon-wodexuanzhong1', 'link': '/my2',isShow: false}
        ],
        isActive: null,
        getIndex: null
      }
    },
    mounted () {
      let ul = document.getElementById('ul')
      let li = ul.getElementsByTagName('li')
      for (let i = 0; i < li.length; i++){
        if(li[i].children[0].className === 'router-link-exact-active router-link-active'){
          if(this.icons[i].ic === '#icon-jiahao'){
            li[i].className = 'jia-rotate'
          }else{
            li[i].className = 'jia-rotate2'
//            console.log(li[i].className)
          }
          this.icons[i].ic =  this.icons[i].ic2
        }
      }
    },
    methods: {
      link ($index) {
//        console.log(this.$children[$index].$el.children[0].children[0].children[0])
//        for(var i = 0; i < this.icons.length; i++){
//          this.icons[i].isClick = false
//        }
        this.getIndex = $index
        this.icons[$index].isShow = !this.icons[$index].isShow
        if($index === 2){

        }
      }
    }
  }
</script>
